<template>
<div>
    <div class="lll">
       <span class="kuan" @click="fuu()">
         <img src="https://m.xiaomiyoupin.com/youpin/static/m/res/images/icons/icon_arrow_left_darkblack.png" alt="">
      </span>
     <el-autocomplete
  popper-class="my-autocomplete"
  v-model="state"
  :fetch-suggestions="querySearch"
  placeholder="请输入内容"
  @select="handleSelect">
  <i
    class="el-icon-edit el-input__icon"
    slot="suffix"
    @click="handleIconClick">
  </i>
  <template slot-scope="{ item }">
    <div class="name">{{ item.value }}</div>
    <span class="addr">{{item.address}}</span>
  </template>
</el-autocomplete> 
<div class="aaa"><div class="bbb">  <router-link to="shangxin">搜索</router-link></div></div>

</div>
    
</div>
 
</template>
<script>
 export default {
    data() {
      return {
        restaurants: [],
        state: ''
      };
    },
    methods: {
         fuu(){
            this.$router.go(-1)
        },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "吊死资本家的绳索", "address": "这是他们自己推销的产品" },
          { "value": "慈父语录", "address": "感受苏联慈父T-85的亲切问候" },
          { "value": "西湖底雅座一位", "address": "进去的都说好就是没有出来的" },
          { "value": "勃艮第炸鸡", "address": "希姆莱HFC倾力推荐" },
          { "value": "小胡子的自我奋斗", "address": "我没上过学，但我征服了欧洲" },
          { "value": "法国武器", "address": "相信我，法棍绝对是武器" },
          { "value": "苏维埃的红色大列巴", "address": "据说，雷神之锤都没有它硬" },
          { "value": "特朗普的假发", "address": "你不会介意七十多岁老人戴假发吧？不会吧不会吧" },
          { "value": "海军精神注入棒", "address": "希望他们不会用这个捅你的腚眼" },
          { "value": "定购水晶棺", "address": "你知道的，北京有个人也是这个棺材" },
          { "value": "中国地图", "address": "你只能看见一大片红，因为世界只有一个中国" },
          { "value": "希尔瓦娜斯的缰绳", "address": "骑过的人都说好" },
          { "value": "科斯坦丁尼耶", "address": "他们说这玩意叫君士坦丁堡" },
          { "value": "波兰", "address": "毫无波澜" },
          { "value": "天安门事件选集", "address": "听说坦克履带会亲切问候你的脸" },
          { "value": "查尔斯王子的亲卫", "address": "年过七十父母健在，如果不是太子的话" },
          { "value": "昭和快乐船", "address": "建造三四年，出海五分钟" },
          { "value": "对犹太吸血鬼十字架", "address": "为什么用佛教标志对付犹太吸血鬼呢？" },
          { "value": "林则徐为何不烧了鸦片", "address": "全城抽烟全城嗨皮" },
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
    },
    mounted() {
      this.restaurants = this.loadAll();
    }
  }
</script>

<style scoped>
a{color: white}
.aaa{
    padding-top: 3px;
    padding-left: 3px;
}
.bbb{
    background-color: red;
height: 32px;width: 52px;
color: white;
border-radius:50%/100%;
text-align: center;
font-size: 14px;
line-height: 32px;
}
.lll{
    display: flex;
    align-content: space-between;
}
.el-autocomplete{width: 270px;}
   li {
    line-height: normal;
    padding: 7px;}
    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  .kuan img{
    width: 38px;height: 38px;margin: auto}
</style>